<h2>部署XX-Net至GAE</h2>
<div class="alert alert-info fade in">
    <p class="message">当前状态: 空闲</p>
</div> <!-- .alert -->
<ul class="nav nav-tabs">
    <li class="active"><a href="#authentication" data-toggle="tab">授权</a></li>
    <li><a href="#logs" data-toggle="tab">日志</a></li>
</ul>
<div id="deploy" class="tab-content">
    <div id="authentication" class="tab-pane fade in active">
        <form method="POST" onSubmit="return false;">
            <div class="row-fluid">
                <div class="span4">
                    <label for="gae-appid">GAE AppID (<a href="https://github.com/XX-net/XX-Net/wiki/Register-Google-appid" target="_blank">如何申请</a>)</label>
                </div> <!-- .span4 -->
                <div class="span8">
                    <input id="gae-appid" type="text" placeholder="批量部署多个AppID, 请用|分割。"/>
                </div> <!-- .span8 -->
            </div> <!-- .row-fluid -->
            <div class="row-fluid">
                <div class="span4">
                    <label for="gae-email">Google Account(Email)</label>
                </div> <!-- .span4 -->
                <div class="span8">
                    <input id="gae-email" type="text" />
                </div> <!-- .span8 -->
            </div> <!-- .row-fluid -->
            <div class="row-fluid">
                <div class="span4">
                    <label for="gae-password">Password</label>
                </div> <!-- .span4 -->
                <div id="password-field" class="span8">
                    <input id="gae-password" type="password" />
                    <p id="password-tip" class="tip hide">
                        如果启用两步验证, 请使用应用专用密码: <a href="https://security.google.com/settings/security/apppasswords" target="_blank">立即设置</a><br>
                        否则, 请开启弱安全应用登录: <a href="https://www.google.com/settings/security/lesssecureapps" target="_blank">立即设置</a><br>
                        <a href="https://github.com/XX-net/XX-Net/wiki/Deploy-password-problem" target="_blank">帮助说明</a>
                    </p>
                </div> <!-- .span8 -->
            </div> <!-- .row-fluid -->
            <div class="row-fluid">
                <div class="span4">
                    <label for="advanced-options"><i class="icon icon-chevron-right"></i> 高级选项</label>
                </div> <!-- .span4 -->
            </div> <!-- .row-fluid -->
            <div id="advanced-options" style="display: none;">
                <div class="row-fluid">
                    <div class="span4">
                        <label for="rc4-password">RC4 Password(<a href="https://github.com/XX-net/XX-Net/wiki/Rc4-password-problem" target="_blank">帮助</a>)</label>
                    </div> <!-- .span4 -->
                    <div id="rc4-password-field" class="span8">
                        <input id="rc4-password" type="password" placeholder="一般无须填写" />
                        <p id="rc4-password-tip" class="tip hide">
                            如果使用RC4密码, 请在配置GoAgent时同样在高级设置中配置RC4密码。<br>
                        </p>
                    </div> <!-- .span8 -->
                </div> <!-- .row-fluid -->
            </div> <!-- #advanced-options -->
            <div class="row-fluid">
                <div class="span12">
                    <button class="btn btn-primary btn-block" type="submit">开始部署</button>
                </div> <!-- .span12 -->
            </div> <!-- .row-fluid -->
        </form>
        <p class="tip">* XX-Net 1.13.6之前的服务端, 请重新部署。</p>
    </div> <!-- #authentication -->
    <div id="logs" class="tab-pane fade">
        <div id="log" class="span12"></div>
    </div> <!-- #log -->
</div> <!-- #tab-content -->

<!-- JavaScript -->
<script type="text/javascript">
    $(function() {
        window.status = 'init';
        window.isAutoScrollLog = true;

        window.timer  = $.timer(function() {
            getDeployStatus();
        });

        window.timer.set({
            time: 1000,
            autostart: true
        });
    });
</script>
<script type="text/javascript">
    $('label[for=advanced-options]').click(function() {
        var isAdvancedOptionsShown = $('#advanced-options').is(':visible');

        if ( !isAdvancedOptionsShown ) {
            $('i.icon', this).removeClass('icon-chevron-right');
            $('i.icon', this).addClass('icon-chevron-down');
            $('#advanced-options').slideDown();            
        } else {
            $('i.icon', this).removeClass('icon-chevron-down');
            $('i.icon', this).addClass('icon-chevron-right');
            $('#advanced-options').slideUp();
        }
    });
</script>
<script type="text/javascript">
    $('#log').scroll(function() {
        var preservedHeight = $('#log').height() + 10,
            scrollHeight    = $('#log')[0].scrollHeight,
            scrollTop       = $('#log').scrollTop();

        if ( scrollTop + preservedHeight == scrollHeight ) {
            window.isAutoScrollLog = true;
        } else {
            window.isAutoScrollLog = false;
        }
    });
</script>
<script type="text/javascript">
    $('#password-field').click(function(){
        $('#password-tip').removeClass('hide');
    });
    $('#rc4-password-field').click(function(){
        $('#rc4-password-tip').removeClass('hide');
    });
</script>
<script type="text/javascript">
    $('html').click(function() {
        $('#password-tip').addClass('hide');
        $('#rc4-password-tip').addClass('hide');
    });

    $('#password-field').click(function(event){
        event.stopPropagation();
    });

    $('#rc4-password-field').click(function(event){
        event.stopPropagation();
    });
</script>
<script type="text/javascript">
    $(function() {
        resizeLogWindow();
    });

    $(window).resize(function() {
        resizeLogWindow();
    });
</script>
<script type="text/javascript">
    function resizeLogWindow() {
        var windowHeight = $(window).height(),
        preservedHeight = 300;

        $('#log').css('height', windowHeight - preservedHeight);
    }
</script>
<script type="text/javascript">
    function updateLog(logContent) {
        $('#log').html(logContent.replace(/\n/g, '<br>'));
    }
</script>
<script type="text/javascript">
    function getDeployStatus() {
        $.ajax({
            type: 'GET',
            url: 'http://127.0.0.1:8084/deploy?cmd=get_log',
            dataType: 'JSON',
            success: function(result) {
                if ( window.status == 'init' || window.status == 'finished' ) {
                    if ( result['status'] == 'init' ) {
                        window.timer.stop();
                        $('.alert').html('当前状态: 空闲');
                    } else if ( result['status'] == 'running' ) {
                        window.status = 'running';
                        $('.alert').html('当前状态: 正在部署...');
                        
                        updateLog(result['log']);
                        changeButtonStatus('cancel');
                    } else if ( result['status'] == 'finished' ) {
                        window.timer.stop();
                        window.status = 'finished';
                        $('.alert').html('当前状态: 部署完成');

                        updateLog(result['log']);
                    } else {
                        window.timer.stop();
                        $('.alert').html('当前状态: 发生异常。<br>异常信息:' + result['status']);
                        updateLog(result['log']);
                    }
                } else if ( window.status == 'running' ) {
                    if ( result['status'] == 'init' ) {
                        window.timer.stop();
                        $('.alert').html('当前状态: XX-Net被重置。');

                        changeButtonStatus('start');
                    } else if ( result['status'] == 'running' ) {
                        updateLog(result['log']);
                    } else if ( result['status'] == 'finished' ) {
                        window.timer.stop();
                        window.status = 'finished';
                        $('.alert').html('当前状态: 部署完成。 <br>请在<a href="http://127.0.0.1:8085/?module=goagent&menu=config">配置页面</a>中设置AppID, 方会生效。');

                        updateLog(result['log']);
                        changeButtonStatus('start');
                    } else {
                        window.timer.stop();
                        $('.alert').html('当前状态: 发生异常。<br>异常信息:' + result['status']);
                        updateLog(result['log']);
                    }
                } else {
                    window.timer.stop();
                    $('.alert').html('当前状态:' + window.status + ', 异常。<br>异常信息:' + result['status']);
                    updateLog(result['log']);
                }
                if(window.isAutoScrollLog == true){
                    $('#log').scrollTop($('#log')[0].scrollHeight);
                }
            }
        });
    }
</script>
<script type="text/javascript">
    function changeButtonStatus(status) {
        if ( status == 'start' ) {
            $('button.btn').removeClass('btn-danger');
            $('button.btn').addClass('btn-primary');
            $('button.btn').html('开始部署');
        } else if ( status == 'cancel' ) {
            $('button.btn').removeClass('btn-primary');
            $('button.btn').addClass('btn-danger');
            $('button.btn').html('终止部署');
        }
    }
</script>
<script type="text/javascript">
    $('button.btn').click(function() {
        if ( $('button.btn').html() == '开始部署' ){
            onStart();
        } else if ( $('button.btn').html() == '终止部署' ) {
            onCancel();
        }
    });
</script>
<script type="text/javascript">
    function onStart(){
        var appId        = $('#gae-appid').val(),
            email        = $('#gae-email').val(),
            password     = $('#gae-password').val(),
            rc4Password  = $('#rc4-password').val();
        var errorMessage = getErrorMessage(appId, email, password);

        if ( errorMessage.length != 0 ) {
            $('.alert').removeClass('alert-info');
            $('.alert').addClass('alert-error');
            
            $('.alert').html(errorMessage);
            return;
        } else {
            $('.alert').removeClass('alert-error');
            $('.alert').addClass('alert-info');
        }

        deployProcess(appId, email, password, rc4Password);
        changeButtonStatus('cancel');
    }
</script>
<script type="text/javascript">
    function onCancel() {
        $.ajax({
            type: 'POST',
            url: 'http://127.0.0.1:8084/deploy?cmd=cancel',
            dataType: 'JSON',
            success: function(result) {
                changeButtonStatus('start');
                $('.alert').html("当前状态: 部署已取消。");
            },
            error: function(result){
                $('.alert').html("当前状态: 发生异常。<br>异常信息:" + result);
            }
        });
    }
</script>
<script type="text/javascript">
    function getErrorMessage(appId, email, password) {
        var errorMessage = '';

        if ( appId.length == 0 || !isAppIdValid(appId) ) {
            errorMessage += 'AppID为空或无效。<br>';
        }
        if ( email.length == 0 || !isEmailValid(email) ) {
            errorMessage += 'Email为空或无效。<br>';
        }
        if ( password.length == 0 ) {
            errorMessage += '请填写您账户的密码。<br>'
        }

        return errorMessage;
    }
</script>
<script type="text/javascript">
    function deployProcess(appId, email, password, rc4Password) {
        var authentication = {
            'appid': appId,
            'email': email,
            'passwd': password,
            'rc4_passwd': rc4Password
        };

        $.ajax({
            type: 'POST',
            url: 'http://127.0.0.1:8084/deploy?cmd=deploy',
            data: authentication,
            dataType: 'JSON',
            success: function(result) {
                window.timer.play();
                $('.nav-tabs a:last').tab('show');
            }
        });
    }
</script>
<script type="text/javascript">
    function isEmailValid(email) {
        var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
        return pattern.test(email);
    }
</script>
<script type="text/javascript">
    function isAppIdValid(appId) {
        var pattern = new RegExp(/^[0-9a-zA-Z\-|]+$/i);
        return pattern.test(appId);
    }
</script>
